<template>
    <div>
        <div id="slider" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a :class="['mui-control-item',item.id === 0 ? 'mui-active' : '']" href="#item1mobile" data-wid="tab-top-subpage-1.html" v-for="item in navs" :key="item.id" @tap=changeNavs(item.id)>
                        {{ item.title }}
                    </a>
                </div>
            </div>
        </div>

        <ul class="photoImgs">
            <router-link v-for="item in list" :key="item.id" tag="li" :to="'/photoInfo/'+item.id" :id="item.id">
                <img v-lazy="item.img_url">
                <div class="photoInfo">
                    <h4>{{ item.title }}</h4>
                    <p>{{ item.zhaiyao }}</p>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>

    import mui from '../../lib/mui/js/mui.min.js'
    import { Toast } from 'mint-ui';
    
    export default {
        data() {
            return {
                id:0, //初始化一个图片分类id
                navs:[],
                list:[]
                
            }
        },
        created(){
            this.getPhotoNav();
            this.getPhotosList(0);//初始化全部图片列表
        },

        mounted(){
             /*window.addEventListener('touchmove', function(){
                mui('.mui-scroll-wrapper').scroll({
                    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
                }); 
            }, { passive: false });*/
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006             
            });        
        },
        
        methods: {
            //获取图片导航分类数据
            getPhotoNav:function(){
                this.$http.get('api/getimgcategory').then(result => {
                    if(result.body.status === 0){
                        var all_photos = { title: '全部',id: 0 }
                        this.navs = result.body.message;
                        this.navs.unshift(all_photos);
                    }
                });
            },
            //获取图片列表数据
            getPhotosList:function(_id){            
                this.$http.get('api/getimages/'+_id).then( result =>{
                    if(result.body.status === 0){                
                        this.list = result.body.message;
                    }else{
                        Toast({
                            message: '获取图片列表失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                });
            },
            //切换图片列表数据
            changeNavs:function(_id){
                this.getPhotosList(_id);//初始化全部图片列表
            }

        },
    }
</script>

<style lang="less" scoped>
    .mui-scroll-wrapper{
        touch-action: none;
    }

    .mui-scroll{
        .mui-control-item{
            cursor:pointer;
        }
    }

    .photoImgs{
        li{
            position: relative;
            list-style: none;
            display:flex;
            justify-content:center;
            background-color: #ccc;
            width: 90%;
            height: 300px;
            margin: 10px auto 0;
            .photoInfo{
                background: rgba(0, 0, 0, 0.6);
                position: absolute;
                bottom:0;
                left: 0;
                padding: 4px;
            }
            h4{
                font-size: 15px;
                color: #fff;
                margin-bottom: 10px;
                text-align: left;
            }
            p{
                color: #fff;
                margin-bottom: 5px;
            }
        }
        img[lazy='loaded']{
            width: 100%;
            box-shadow: 0 0 6px #ccc;
        }
        img[lazy='loading'] {    
            width: auto;
            height: auto;
            margin: auto;
        }     
    }
    
</style>
